<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="../img/1.mp4" ></video>
    <br>
        <button>播放</button>
        <button>暂停</button>
        <button>快熟播放</button>
        <button>快进</button>
        <button>快退</button>
        <button>重新加载</button>
        <button>全屏</button>
        <button>中屏</button>
        <button>小屏</button>
        <button>大屏</button>
    <script>
        let btn = document.querySelectorAll("button")
        let vid = document.querySelector("video")

        btn[0].onclick = function(){

            vid.play()
        }

        btn[1].onclick = function(){
            vid.pause()
        }

        // 倍数
        btn[2].onclick = function(){
            // 10倍数播放
            vid.playbackRate = 10
        }
        // 快进
        btn[3].onclick = function(){
            vid.currentTime += 10
        }
        // 快退
        btn[4].onclick = function(){
            vid.currentTime -= 10
        }
        // 重新加载
        btn[5].onclick = function(){
            vid.load()
        }
        // 全屏
        btn[6].onclick = function(){
            vid.webkitRequestFullScreen()
        }

        // 大 中 小

        btn[7].onclick = function(){
            vid.width = "600"
            vid.height = "600"
        }
         btn[8].onclick = function(){
            vid.width = "200"
            vid.height = "200"
        }
         btn[9].onclick = function(){
            vid.width = "1200"
            vid.height = "1200"
        }
    </script>
</body>
</html>